<style lang='scss' scoped>
	$height: 36px;
	.job-frame {
		cursor: default;
		line-height: $height;
		height: $height;
		font-size: 15px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
		border-radius: 4px;
    border: 1px solid #ebeef5;
    color: #303133;
    text-align: center;
    &:not(.add-btn) {
    	position: relative;
    	padding: 0px 40px;
			white-space: nowrap;
    }
	}
	.operate-area {
		position: absolute;
		font-size: 12px;
		right: 5px;
		i {
			cursor: pointer;
			padding: 1px;
			&:not(:first-child) {
				margin-left: -1px;
			}
			&:hover {
				border-radius: 50%;
				background-color: rgb(84, 92, 100);
				color: #fff;
			}
		}
	}
	.add-btn {
		width: $height;
		border-radius: 50%;
		cursor: pointer;
	}
</style>
<template>
	<div v-if="id" class="job-frame" @mouseover="hoverHandle" @mouseout="outHandle">
		<span>{{name}}</span>
		<span class="operate-area" v-show="is_hover">
			<i class="el-icon-edit" @click="editNode(name)"></i>
			<i class="el-icon-close" @click="deleteNode"></i>
		</span>
	</div>
	<div v-else class="job-frame add-btn" @click="editNode">
		<i class="el-icon-plus"></i>
	</div>
</template>
<script>
	export default {
		props: {
			id: {
				default: ''
			},
			name: {
				default: ''
			},
			parent_id: {
				default: ''
			}
		},
		data() {
			return {
				is_hover: false
			}
		},
		methods: {
			hoverHandle() {
				if(!this.is_hover) {
					this.is_hover = true;
				}
			},
			outHandle() {
				this.is_hover = false;
			},
			deleteNode() {
				if(this.id) {
					let parent_id = this.parent_id;
					this.$confirm('确定删除该'+(parent_id?'职位':'部门')+'?', '警告', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'warning'
	        }).then(() => {
	        	this.$axios.get('/admin/delete'+(parent_id?'Job':'Department')+'/'+this.id).then(res => {
	        		if(res.s == 1) {
	        			this.$message.success('删除成功!');
	        			this.$emit('reqReload');
	        		}
	        	})
	        }).catch(() => {
	          this.$message.info('取消操作')
	        });
				}
			},
			editNode(pre_name='') {
				pre_name = typeof pre_name == 'string' ? pre_name : '';
				let parent_id = this.parent_id, self_id = this.id;
				let operate_name = self_id ? '修改':'添加';
				let title = operate_name+(parent_id?'职位':'部门')+'名称';
				this.$prompt('', title, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: pre_name,
          inputPattern: /^.{0,10}$/,
          inputErrorMessage: '不能超过十位字符'
        }).then(({ value }) => {
        	if(value) {
        		if(pre_name && value == pre_name) {
        			this.$message.warning('内容没有修改');
        		}else {
        			let send_data = { name: value };
		        	if(!self_id) {
		        		send_data.department_id = parent_id;
		        	}
		        	if(self_id && pre_name) {
		        		send_data.id = self_id;
		        	}
		        	this.$axios.post('/admin/'+(self_id?'edit':'add')+(parent_id?'Job':'Department'), send_data).then(res => {
		        		if(res.s == 1) {
		        			this.$message.success(operate_name + '成功');
		        			this.$emit('reqReload');
		        		}
		        	})
        		}
        	}else {
        		this.$message.error('输入不能为空')
        	}
        }).catch(() => {
          this.$message.info('取消操作');       
        });
			}
		}
	}
</script>